window.onload = function(){
    let left = document.getElementById('left');//轮播图左按钮
    let right = document.getElementById('right');//轮播图右按钮
   
    let list = document.getElementById('slider_list');//轮播的所有列
    let fs_col_2 =document.getElementById('fs_col_2');//轮播区域
    let slider_indicators = document.getElementById("slider_indicators").getElementsByTagName('i');//轮播下部小圆点
    let index = 0;//轮播圆点编号
    let timer;//定时器

    let tab_head = document.getElementById("tab_head").getElementsByClassName("head_item");//个人专区（促销和公告）
    let tab_active = document.getElementById("tab_active");//红色滑块
    let new_content = document.getElementById("new_content").getElementsByClassName("content_item");//新闻内容

    
    let cd_items = document.getElementById('cd').getElementsByClassName("cd_item_txt");//获取倒计时显示区域

    let left2 = document.getElementById("left2");//秒杀专区的左按钮
    let right2 = document.getElementById("right2");//秒杀专区的右按钮
    let sk_slider_list = document.getElementById("sk_slider_list");//秒杀专区内容显示块
    
    let list_wapper = document.getElementById("list_wapper");//秒杀右侧区块
    let chn_i = document.getElementById("chn_i").getElementsByTagName("i");//秒杀右侧块区小圆点
    
    let top_tab_head = document.getElementById("top_tab_head").getElementsByClassName("tab_head_item");//排行榜头部
    let top_tab_body = document.getElementById("top_tab_body").getElementsByClassName("tab_body_item");//排行榜内容

    let daily_slider_wrapper = document.getElementById("daily_slider_wrapper");//会买内容
    let left3 = document.getElementById("left3");//会买左按钮
    let right3 = document.getElementById("right3");//会买右按钮
    let daily_i = document.getElementById("daily_inducators").getElementsByTagName("i");//会买下面的圆点
    console.log(daily_i);

//偏移量转换
    animate =  function(offest){
        let newleft = parseInt(list.style.left) + offest;
        list.style.left = newleft + 'px';
    }
// 左按钮点击事件
    left.onclick = function(){
        let newleft = parseInt(list.style.left);
        if(newleft === 0){
            list.style.left = "-4130px";
            index = slider_indicators.length - 1;
            on_clean_show(index);
        }else{
            index--;
            on_clean_show(index);
            animate(590);
        }         
    }
//右按钮点击事件 
    right.onclick = function(){
        let newleft = parseInt(list.style.left);
        if(newleft === -4130){
            list.style.left = "0px";
            index = 0;
            on_clean_show(index);            
        }else{
            index++;
            on_clean_show(index);            
            animate(-590);
        } 
    }
//定时轮播
/* 因为我不是改变的图片地址，而是进行图片的偏移转换，所有过渡效果可能就没了 */

    play = function(){
        timer = setInterval(function(){right.onclick()},2500);
    }
    play();
    stop = function(){
        clearInterval(timer);
    }
  //鼠标放上去就停止，拿开就定时播放
    fs_col_2.onmouseover = stop;
    fs_col_2.onmouseout = play;

//下部分的小圆点

    on_clean_show = function(index){
        for(let key in slider_indicators){//清除样式on
            slider_indicators[key].className = '';
        }
        slider_indicators[index].className = "on";
    }
//移动到小圆点，显示相对应的图片
    havoer_on = function(){
        for(let key in slider_indicators){
            slider_indicators[key].onmouseover = function(){
                list.style.left = parseInt(key)*(-590) + "px";//正好key的值和index对应，可以直接计算偏转
                index = parseInt(key);//移动之后，改变index的值
                on_clean_show(index);//重新清除并且给样式
            }
        }
    }
    havoer_on(index);

//个人专区新闻
    //个人专区（促销和公告设置滑动函数）
    tab_head_on = function(tab_head){
        for(let key in tab_head){
            tab_head[key].onmouseover = function(){
                if(parseInt(key) === 0){
                    tab_active.style.transform = "translateX(0px)";//促销
                    new_content[0].style.display = "block";
                    new_content[1].style.display = "none";
                }else{
                    tab_active.style.transform = "translateX(54px)";//公告
                    new_content[0].style.display = "none";
                    new_content[1].style.display = "block";
                }
            }
        }
    }
    tab_head_on(tab_head);
//京东秒杀倒计时
    countdown = function(){
        let myDate = new Date();
        let hours = myDate.getHours();
        let hour = hours%2?0:1;
        let minutes = myDate.getMinutes();
        let seconds = myDate.getSeconds();
        //每两小时一个片，当前时间为偶数时，倒计时还有0个小时
        cd_items[0].innerHTML = min_sec((hour).toString());
        //分钟
        cd_items[1].innerHTML = min_sec((60 - minutes).toString());
        //秒
        cd_items[2].innerHTML = min_sec((60 - seconds).toString());
        //js写无限循环会让浏览器死掉的
        // while(minutes !=0){
            
        //     seconds--;
        //     if(seconds === 0){
        //         seconds = 60;
        //         minutes--;
        //         cd_items[1].innerHTML = min_sec((60 - minutes).toString());
        //         if(minutes === 0){
        //             minutes = 60;
        //             hour--;
        //             cd_items[0].innerHTML = min_sec(hour.toString());
        //         }
        //     }
        // }
    }
    //时间为个位时补0
    min_sec = function(str){
        if(str.length === 1){
            str = '0' + str;
        }
        return str;
    }
    setInterval(function(){countdown()},1000);

    //秒杀专区按钮事件
    mioasha_btn = function(){//暂时还没有实现循环播放
        left2.onclick = function(){
            let offest_miaosha = -(parseInt(sk_slider_list.style.transform.replace(/[^0-9]/ig,"")));//秒杀专区的偏移量
            if(offest_miaosha === 0){
                // sk_slider_list.style.transform = "translateX(-1600px)";//为0时，禁用左
            }else{
        
                sk_slider_list.style.transform = `translateX(${offest_miaosha + 800}px)`;
            }
        }
        right2.onclick = function(){
            let offest_miaosha = -(parseInt(sk_slider_list.style.transform.replace(/[^0-9]/ig,"")));//秒杀专区的偏移量
            if(offest_miaosha === -1600){
                // sk_slider_list.style.transform = "translateX(0px)";为-1600是，禁用右
            }else{
                sk_slider_list.style.transform = `translateX(${offest_miaosha - 800}px)`;
            }
        }
    }
    mioasha_btn();
    
    chn_i_hover = function(chn_i){
        for(let key in chn_i){
            chn_i[key].onmouseover= function(){
                chn_i[0].className = "";
                chn_i[1].className = "";
                list_wapper.style.transform = `translateX(${-key*180}px)`;
                chn_i[key].className = "active";
            }
        }
    }
    chn_i_hover(chn_i);

//排行榜

    //头部样式清除
    top_head_clear = function(){
        for(let key in top_tab_head){
            top_tab_head[key].className = "tab_head_item";
        }
    }
    //内容显示
    top_body_show = function(num){
        for(let key in top_tab_body){
            if(key == num){
                top_tab_body[key].style= "disply:block";
            }else{
                top_tab_body[key].style = "display:none";
            }
        }
    }
    //排行榜头部触摸事件
    top_head = function(){
        for(let key in top_tab_head){
            top_tab_head[key].onmouseover = function(){
                top_head_clear();
                top_tab_head[key].className = "tab_head_item tab_active";
                top_body_show(key);
                top_tab_body_i(top_tab_body[key]);
            }
        }
    }
    top_head();
    //排行榜下不小圆点触摸事件
    top_tab_body_i = function(obj){
        let top_indicators = obj.getElementsByClassName("top_indicators")[0].getElementsByTagName("i");
        let slider_wrapper = obj.getElementsByClassName("slider_wrapper")[0];
        for(let key in top_indicators){
            top_indicators[key].onmouseover = function(){
                top_indicators[0].className = "slider_btn";
                top_indicators[1].className = "slider_btn";
                top_indicators[key].className = "slider_btn slider_btn_active";
                slider_wrapper.style.transform = `translateX(${-350*parseInt(key)}px)`;
            }
        }
    }
    top_tab_body_i(top_tab_body[0]);//为第一个添加滑动

//会买专区
    //左右按钮的点击事件
    huimai_btn = function(){
        left3.onclick = function(){
            let now_transform = -parseInt(daily_slider_wrapper.style.transform.replace(/[^0-9]/ig,""));//当前偏移量
            if(now_transform !== 0){
                daily_slider_wrapper.style.transform = `translateX(${now_transform+350}px)`;
                huimai_btn_i();
            }
        }
        right3.onclick = function(){
            let now_transform = -parseInt(daily_slider_wrapper.style.transform.replace(/[^0-9]/ig,""));
            if(now_transform !== -700){
                daily_slider_wrapper.style.transform = `translateX(${now_transform-350}px)`;
                huimai_btn_i();
            }
        }
    }
    huimai_btn();
    //小圆点样式清除
    huimai_i_clear = function(){
        for(let key in daily_i){
            daily_i[key].className = "slider_btn";
        }
    }
    //小圆点触摸事件
    huimai_i = function(){
        for(let key in daily_i){
            daily_i[key].onmouseover = function(){
                huimai_i_clear();
                daily_i[key].className = "slider_btn slider_btn_active";
                daily_slider_wrapper.style.transform = `translateX(${-parseInt(key)*350}px)`;
            }
        }
    }
    huimai_i();
    //点击按钮，样式转换
    huimai_btn_i = function(){
        let now_transform = -parseInt(daily_slider_wrapper.style.transform.replace(/[^0-9]/ig,""));
        huimai_i_clear();
        if(now_transform === 0){
            daily_i[0].className = "slider_btn slider_btn_active";
        }else if(now_transform === -350){
            daily_i[1].className = "slider_btn slider_btn_active";
        }else{
            daily_i[2].className = "slider_btn slider_btn_active";
        }
    }
}